<template>
	<view class="container flex-column">
		<text class="text-title1">手机号登录/注册</text>
		<text class="text-title2">首次登录自动注册</text>

		<!-- 手机号 -->
		<view class="view-input flex-row center-row inputContent">
			<image
				class="input-lefticon"
				src="https://mcdn.chatgk.com/xcx/static/images/login/login_phone.png"
				mode="aspectFit"
			></image>
			<view class="view-line"></view>
			<input
				v-model="phone"
				class="input"
				type="number"
				placeholder="请输入您的手机号"
				placeholder-class="input-placeholder"
			/>
		</view>

		<!-- 验证码or密码 -->
		<view class="view-input flex-row center-row inputContent" style="margin-top: 32rpx">
			<image
				v-if="isCodeLogin"
				class="input-lefticon"
				src="https://mcdn.chatgk.com/xcx/static/images/login/login_code.png"
				mode="aspectFit"
			></image>
			<image
				v-else
				class="input-lefticon"
				src="https://mcdn.chatgk.com/xcx/static/images/login/password.png"
				mode="aspectFit"
			></image>
			<view class="view-line"></view>
			<input
				class="input"
				v-if="isCodeLogin"
				v-model="code"
				text-content-type="oneTimeCode"
				type="number"
				placeholder="请输入验证码"
				placeholder-class="input-placeholder"
			/>
			<input
				class="input"
				v-if="!isCodeLogin"
				v-model="password"
				password="true"
				placeholder="请输入密码"
				placeholder-class="input-placeholder"
			/>
			<text
				class="button-code"
				:style="[time != 60 && isCodeLogin ? 'color: #D8D8D8' : '']"
				@tap="onClickSendCode"
			>
				{{ isCodeLogin ? codeText : '忘记密码' }}
			</text>
		</view>
		<!-- 用户协议 -->
		<view class="useragreement">
			<image
				style="width: 32rpx; height: 32rpx; margin-right: 12rpx"
				:src="
					'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_' +
					(isSelectAgreement ? 's.png' : 'n.png')
				"
				mode="aspectFit"
				@tap="onClickCheckAgreement"
			></image>
			<text>登录或注册代表您已同意</text>
			<text style="color: #ff3b0a" @tap="userAgreement">用户协议</text>
			<text>和</text>
			<text style="color: #ff3b0a" @tap="privacyPolicy">隐私政策</text>
		</view>
		<!-- 登录 -->
		<button :disabled="loginDisabled" class="button-login" :class="isAvailable ? 'available' : ''" @tap="onPulling">
			登录
		</button>
		<button class="button-passwordlogin" @tap="onClickPasswordLogin">
			{{ isCodeLogin ? '密码登录' : '验证码登录' }}
		</button>
		<!-- <loading v-show="loadshow"></loading> -->
	</view>
	<view
		class="loginshowbox"
		v-if="ishowxiezi && !isSelectAgreement"
		@tap.stop="
			() => {
				ishowxiezi = false;
			}
		"
	>
		<view class="loginshowbox-main" @tap.stop="() => {}">
			<view class="loginshowbox-main-h">用户协议和隐私政策</view>
			<view class="loginshowbox-main-c">
				进入下一步，请先阅读并同意
				<text style="color: #ff3b0a" @tap="userAgreement">用户协议</text>
				<text>和</text>
				<text style="color: #ff3b0a" @tap="privacyPolicy">隐私政策</text>
			</view>
			<view class="loginshowbox-main-f">
				<view
					class="loginshowbox-no"
					@tap.stop="
						() => {
							ishowxiezi = false;
						}
					"
				>
					不同意
				</view>
				<view class="loginshowbox-no loginshowbox-yes" @tap.stop="onchangexieyi">同意并登陆</view>
			</view>
		</view>
	</view>
</template>

<script>
import tool from '@/common/manager/tool.js';
export default {
	data() {
		return {
			timer:null,
			loginDisabled: false,
			logingShow: false,
			loadshow: false,
			isCodeLogin: true,
			codeText: '获取验证码',
			isSelectAgreement: false, // 是否勾选协议
			isAvailable: false, // 登录按钮是否可用
			time: 60,
			phone: '',
			code: '',
			password: '',
			isNavBack: '1',
			ishowxiezi: false
		};
	},
	watch: {
		phone: {
			handler(newval) {
				if (newval && this.phone) {
					this.isAvailable = true;
				} else {
					this.isAvailable = false;
				}
			}
		},
		code: {
			handler(newval) {
				if (this.isCodeLogin) {
					if (newval && this.code) {
						this.isAvailable = true;
					} else {
						this.isAvailable = false;
					}
				}
			}
		},
		password: {
			handler(newval) {
				if (!this.isCodeLogin) {
					if (newval && this.password) {
						this.isAvailable = true;
					} else {
						this.isAvailable = false;
					}
				}
			}
		}
	},
	onLoad(option) {
		this.isNavBack = option.isNavBack != undefined ? option.isNavBack : '1';
		this.phone = option.phone;
	},
	onReady() {
		let pages = getCurrentPages();
		let page = pages[pages.length - 1];
	},
	methods: {
		userAgreement() {
			uni.navigateTo({
				url: '/subpackages/subpackage1/pages/userAgreement/userAgreement'
			});
		},
		privacyPolicy() {
			uni.navigateTo({
				url: '/subpackages/subpackage1/pages/privacyPolicy/privacyPolicy'
			});
		},
		onYesInputInfo() {
			if (this.isAvailable) {
				if (this.isCodeLogin) {
					if (this.phone && this.code) {
						if (!this.isSelectAgreement) {
							this.ishowxiezi = true;
						} else {
							this.onClickLogin();
						}
					} else {
						this.isSelectAgreement = false;
						this.ishowxiezi = false;
						if (!this.phone) {
							uni.showToast({
								title: '请输入账号',
								icon: 'none'
							});
							return;
						}
						if (!this.code) {
							uni.showToast({
								title: '请输入验证码',
								icon: 'none'
							});
							return;
						}
					}
				} else {
					if (this.phone && this.password) {
						if (!this.isSelectAgreement) {
							this.ishowxiezi = true;
						} else {
							this.onClickLogin();
						}
					} else {
						if (!this.phone) {
							uni.showToast({
								title: '请输入账号',
								icon: 'none'
							});
							return;
						}
						if (!this.password) {
							uni.showToast({
								title: '请输入密码',
								icon: 'none'
							});
							return;
						}
					}
				}
			}
		},
		onchangexieyi() {
			this.isSelectAgreement = true;
			this.ishowxiezi = false;
			this.onPulling();
		},
		// 点击发送验证码or忘记密码
		async onClickSendCode() {
			if (this.isCodeLogin) {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				this.loadshow = true;
				this.$request
					.sendCode({phone: this.phone})
					.then((res) => {
						this.loadshow = false;
						// uni.hideLoading()
						uni.showToast({
							title: '发送成功',
							icon: 'success'
						});

						this.startCountdown();
					})
					.catch((err) => {
						uni.hideLoading();
					});
			} else {
				uni.navigateTo({
					url: './forget-password'
				});
			}
		},
		// 点击查看协议
		onClickAgreement(tag) {
			if (tag == 0) {
				console.log('服务协议');
			} else {
				console.log('隐私政策');
			}
		},
		// 点击勾选协议
		onClickCheckAgreement() {
			this.isSelectAgreement = !this.isSelectAgreement;
		},
		onPulling() {
			uni.removeStorageSync('scene');
			uni.removeStorageSync('is_visitor');
			this.onYesInputInfo();
		},
		// 点击登录
		onClickLogin: tool.debounce(function () {
			if (!this.isSelectAgreement) {
				return;
			}
			this.loginDisabled = true;
			this.logingShow = true;
			uni.showLoading({
				title: '登录中...',
				mask: true
			});
			if (this.isCodeLogin) {
				this.loadshow = true;
				this.$request
					.phoneRegister({
						phone: this.phone,
						code: this.code
					})
					.then((res) => {
						if (res.code == 20000) {
							this.loginDisabled = false;
							this.logingShow = false;
							this.loadshow = false;
							// uni.hideLoading()
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							// 本地存储
							uni.setStorageSync('isFirstLogin', true);

							const userInfo = getApp().globalData.userInfo;
							// getApp().getUserCollect()

							if (userInfo.setpwd == '1') {
								uni.navigateTo({
									url: './set-password'
								});
							} else if (!userInfo.pid) {
								uni.navigateTo({
									url: './perfect-info'
								});
							} else {
								if (this.isNavBack == '1') {
									uni.navigateBack({
										delta: 2
									});
								} else {
									uni.switchTab({
										url: '/pages/tabBar/home/home'
									});
								}
							}
						} else {
							this.loginDisabled = false;
						}
					})
					.catch((err) => {
						this.loginDisabled = false;
						this.logingShow = false;
						uni.hideLoading();
					});
			} else {
				this.$request
					.phoneLogin({
						phone: this.phone,
						password: this.password
					})
					.then((res) => {
						if (res.code == 20000) {
							this.logingShow = false;
							this.loadshow = false;
							// uni.hideLoading()
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							uni.setStorageSync('isFirstLogin', true);

							const userInfo = getApp().globalData.userInfo;
							// getApp().getUserCollect()
							if (!userInfo.pid) {
								uni.redirectTo({
									url: './perfect-info'
								});
							} else {
								// setTimeout(() => {
								if (this.isNavBack == '1') {
									uni.navigateBack({
										delta: 2
									});
								} else {
									uni.switchTab({
										url: '/pages/tabBar/home/home'
									});
								}
								// }, 1000)
							}
						} else {
							this.loginDisabled = false;
							this.logingShow = false;
						}
					})
					.catch((err) => {
						this.loginDisabled = false;
						this.logingShow = false;
						// uni.hideLoading()
					});
			}
		}, 1000),
		// 点击密码登录or验证码登录
		onClickPasswordLogin() {
			this.isCodeLogin = !this.isCodeLogin;
		},

		// 开始验证码倒计时
		startCountdown() {
			const time = this.time--;
			this.codeText = time + 's';

			setTimeout(() => {
				if (time > 0) {
					this.startCountdown();
				} else {
					this.codeText = '获取验证码';
					this.time = 60;
				}
			}, 1000);
		}
	}
};
</script>

<style scoped>
button::after {
	border: none;
}

/* 设置 placeholder 的颜色 */
::v-deep .input-placeholder {
	color: #cccccc !important;
	opacity: 1 !important;
	font-size: 28rpx !important;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.container {
	padding: 50rpx 76rpx 0 76rpx;
}

.inputContent {
	margin-top: 160rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.button-back {
	width: 60rpx;
	height: 60rpx;
	margin-top: calc(20rpx + var(--status-bar-height));
	margin-left: 32rpx;
}

.text-title1 {
	color: #464646;
	font-size: 40rpx;
	font-weight: bold;
	margin-top: 68rpx;
}

.text-title2 {
	font-size: 28rpx;
	color: #999999;
	margin-top: 16rpx;
}

.view-input {
	height: 80rpx;
	border: 1rpx solid #cccccc;
	border-radius: 20rpx;
}

.input-lefticon {
	width: 44rpx;
	height: 40rpx;
	margin: 0 30rpx 0 30rpx;
}

.view-line {
	width: 2rpx;
	height: 44rpx;
	background-color: #d8d8d8;
}

.input {
	width: 260rpx;
	color: #464646;
	caret-color: #464646;
	font-size: 28rpx;
	margin: 0 20rpx 0 38rpx;
}

.button-code {
	width: 150rpx;
	color: #ff3b0a;
	font-size: 28rpx;
	text-align: center;
}

.text-read {
	color: #333;
	font-size: 24rpx;
	margin-top: 80rpx;
}

.button-login {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	font-size: 28rpx;
	font-weight: bold;
	background: #d8d8d8;
	border-radius: 20rpx;
	margin-top: 40rpx;
}

.button-login.available {
	background: #ff3b0a;
}

.button-passwordlogin {
	font-size: 28rpx;
	color: #666666;
	font-weight: bold;
	background-color: transparent;
	margin-top: 20rpx;
}

.loginshowbox {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
}

.loginshowbox-main {
	padding: 0 38rpx;
	width: 686rpx;
	height: 380rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-sizing: border-box;
}

.loginshowbox-main-h {
	height: 120rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loginshowbox-main-c {
	width: 100%;
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #999999;
	text-align: center;
}

.loginshowbox-main-f {
	margin-top: 50rpx;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

.loginshowbox-no {
	width: 222rpx;
	height: 64rpx;
	border-radius: 32rpx;
	border: 2rpx solid #979797;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #999999;
}

.loginshowbox-yes {
	border: none;

	color: #ffffff;
	background: #ff3b0a;
}

.useragreement {
	display: flex;
	font-size: 24rpx;
	align-items: center;
	justify-content: center;
	padding-top: 50rpx;
	color: #333333;
}
</style>
